<style>
.hidden-group-id, .hidden-insertion-id, .hidden-therapy-type, .hidden-allergen-id {
	display: none;
}

.treatmentTypeName {
	background-color: #2191C0;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 13px;
	padding: 4px 10px;
	text-align: center;
}

#treatments-info ul {
	padding-left: 0px;
	list-style-type: none;
	margin-top: 2px;
}

.medicationName {
	width: 280px;
	background: #379CC6;
	color: #FFFFFF;
	font-weight: bold;
	padding: 2px 10px;
	text-align: right;
	margin-top: 5px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	font-size: 13px;
}

.medicationDetailName {
	width: 260px;
	background: #4da7cc;
	color: #FFFFFF;
	font-weight: bold;
	padding: 2px 10px;
	text-align: right;
	float: left;
	margin-right: 60px;
}

.treatment-checkbox {
	margin: 2px 0px 0px 0px;
}

.insertion-select {
	margin: 0px 0px 0px 10px;
	font-family: 'Helvetica','Arial','Sans' !important;
    font-size: 12px !important;
}

#selectInsertionBlock {
	display: inline;
}

.treatments {
	padding: 5px 0px;
	border-bottom: 1px solid #2191C0;
}

#treatments-info label {
	font-weight: bold;
	float: none;
	width: none;
	color: #666;
	cursor: pointer;
	display: inline;
}

.treatment-multiplicity, .treatment-dose, .treatment-description {
	width: 100px;
	margin: 0px 20px 0px 5px;
	padding: 1px;
	height: 16px;
	overflow: hidden;
}

.treatment-multiplicity{
	width: 30px;	
}

#selectTherapyTypeBlock, #selectAllergenBlock {
	display: inline;
	margin: 0px 0px 0px 10px;
}

.therapy-type-select, .allergen-select {
	font-family: 'Helvetica','Arial','Sans' !important;
	font-size: 12px !important;
}
</style>

<script>
$(document).ready(function() {
	$('textarea').addClass("autogrow-short").autogrow();
	
	$(".saved-treatments").each(function() {
		var insertionId = $(this).find(".hidden-insertion-id").val();
		$(this).find(".insertion-select option[value=" + insertionId + "]").attr("selected", "selected");

		var allergenId = $(this).find(".hidden-allergen-id").val();
		$(this).find(".allergen-select option[value=" + allergenId + "]").attr("selected", "selected");
		
		var therapyType = $(this).find(".hidden-therapy-type").val();
		$(this).find(".therapy-type-select option[value=" + therapyType + "]").attr("selected", "selected");
	});

	$("#treatments-info").accordion({ collapsible: true, active: false, header: "h3", autoHeight: false });
});

var updateTreatments = function () {
	var jsonObject = "";
	var surveyId = $("#hidden-survey-id").val();
	var syndromeId = $("#syndrome-select option:selected").val();

	var isEmpty = true;
	
	jsonObject = jsonObject + "{'surveyId':" + surveyId + ",";
	jsonObject = jsonObject + "'syndromeId':" + syndromeId;
	
	$(".treatments").each(function() {
		$checkbox = $(this).find(".treatment-checkbox");
		$multiplicity = $(this).find(".treatment-multiplicity");
		$dose = $(this).find(".treatment-dose");
		$description = $(this).find(".treatment-description");
		$insertionType = $(this).find(".insertion-select option:selected");
		$therapyType = $(this).find(".therapy-type-select option:selected");
		$allegren = $(this).find(".allergen-select option:selected"); 
		var treatmentId = $checkbox.val();
		var insertionId = null;
		var therapy = null;
		var allegrenId = null;
		var multiplicity = null;
		var dose = null;
		var description = null;
		var checked = "false";
		if($checkbox.is(":checked")){
			if(isEmpty){
				jsonObject = jsonObject + ",'treatments':[";
			}
			isEmpty = false;
			checked = "true";
			if($description.val() != "" && $description.val() != undefined) {
				description = "'" + $description.val() + "'";
			}
			if($multiplicity.val() != "" && $multiplicity.val() != undefined) {
				multiplicity = "'" + $multiplicity.val() + "'"; 
			}
			if($dose.val() != "" && $dose.val() != undefined) {
				dose = "'" + $dose.val() + "'"; 
			}
			if($insertionType.val() != 0 && $insertionType.val() != "" && $insertionType.val() != undefined) {
				insertionId = "'" + $insertionType.val() + "'"; 
			}
			if($therapyType.val() != 0 && $therapyType.val() != "" && $therapyType.val() != undefined) {
				therapy = "'" + $therapyType.val() + "'"; 
			}
			if($allegren.val() != 0 && $allegren.val() != "" && $allegren.val() != undefined) {
				allegrenId = "'" + $allegren.val() + "'"; 
			}
			jsonObject = jsonObject + "{'id':" + treatmentId + ",";
			jsonObject = jsonObject + "'insertionId':" + insertionId + ",";
			jsonObject = jsonObject + "'allegrenId':" + allegrenId + ",";
			jsonObject = jsonObject + "'therapy':" + therapy + ",";
			jsonObject = jsonObject + "'isChecked':" + checked + ",";
			jsonObject = jsonObject + "'description':" + description + ",";
			jsonObject = jsonObject + "'dose':" + dose + ",";
			jsonObject = jsonObject + "'multiplicity':" + multiplicity + "},";
		}
	});
	if(!isEmpty){
		jsonObject = jsonObject.substring(0, jsonObject.length - 1);
		jsonObject = jsonObject + "]";
	}
	jsonObject = jsonObject + "}";
	console.log("jsonObject: " + jsonObject);

	$.ajax({
		type : "POST",
		url : "/surveyView/updateTreatments",
		data : jsonObject,
		dataType : "json",
		contentType : "application/json",
		success : function(id) {
			$("#hidden-survey-id").val(id);
			noty({
				text: "&{'treatments.save.success'}",
				layout: "topRight",
				type: "success"
				});
		},
		error : function(e) {
			noty({
				text: "&{'treatments.save.error'}",
				layout: "topRight",
				type: "error"
			});
		}
	});
}
</script>

<div id="treatments-info">
	#{if surveyTreatments != null && !surveyTreatments.isEmpty()}
		#{list items:surveyTreatments, as:'surveyTreatment'}
			<div class="treatmentTypeName">${surveyTreatment.medicationDetail.medication.treatmentType.treatmentTypeName}</div>
			<ul>
				<li>
					<div class="medicationName">${surveyTreatment.medicationDetail.medication.medicationName}</div>
					<ul>
						<li>
    						<div class="treatments saved-treatments">
								<div class="medicationDetailName">${surveyTreatment.medicationDetail.medicationDetailName}</div>
								<div>
									<input class="treatment-checkbox" value="${surveyTreatment.medicationDetail.medicationDetailId}" type="checkbox" checked="checked">
									#{if surveyTreatment.insertion != null}
										<input class="hidden-insertion-id" value="${surveyTreatment.insertion.insertionId}" type="text">
									#{/if}
									#{if surveyTreatment.allergen != null}
										<input class="hidden-allergen-id" value="${surveyTreatment.allergen.allergenId}" type="text">
									#{/if}
							    	<div id="selectInsertionBlock">
							    		#{if surveyTreatment.medicationDetail.insertions != null && !surveyTreatment.medicationDetail.insertions.isEmpty()}
											#{select 'insertions', items:surveyTreatment.medicationDetail.insertions, valueProperty:'insertionId', labelProperty:'insertionName', value:0, class:'insertion-select'}
												#{option 0} &{'select.insertion'} #{/option}
											#{/select}
							    		#{/if}
									</div>
									<div id="selectInsertionBlock">
							    		#{if surveyTreatment.medicationDetail.allergens != null && !surveyTreatment.medicationDetail.allergens.isEmpty()}
											#{select 'allergens', items:surveyTreatment.medicationDetail.allergens, valueProperty:'allergenId', labelProperty:'allergenName', value:0, class:'allergen-select'}
												#{option 0} &{'select.allergen'} #{/option}
											#{/select}
							    		#{/if}
									</div>
									<div id="selectTherapyTypeBlock">
										#{if surveyTreatment.medicationDetail.medication.treatmentType.hasTherapyType}
											#{if surveyTreatment.therapyType != null}
												<input class="hidden-therapy-type" value="${surveyTreatment.therapyType.name()}" type="text">
											#{/if}
											#{select 'therapy-type', class:'therapy-type-select'}
												#{option '0'}&{'select.therapy.type'}#{/option}
												#{option 'BASIC'}&{'therapy.type.basic'}#{/option}
												#{option 'SUPPORTING'}&{'therapy.type.supporting'}#{/option}
											#{/select}
										#{/if}
									</div>
									
									<div style="margin: 6px 0px 4px 390px">
										<label>&{'treatment.multiplicity'}</label>
										<textarea class="treatment-multiplicity">${surveyTreatment.multiplicity}</textarea>
										<label>&{'treatment.dose'}</label>
										<textarea class="treatment-dose">${surveyTreatment.dose}</textarea>
										<label>&{'treatment.description'}</label>
										<textarea class="treatment-description">${surveyTreatment.treatmentDescription}</textarea>
									</div>
								</div>
							</div>
				 		</li>
					</ul>
				</li>
			</ul>
		#{/list}
	#{/if}
	#{if syndrome != null}
		#{list items: models.TreatmentType.find("bySyndrome", syndrome).fetch(), as:'treatmentType'}
			<h3 class="treatmentTypeName">${treatmentType.treatmentTypeName}</h3>
			<div>
	 			#{list items:models.Medication.find("byTreatmentType", treatmentType).fetch(), as:'medication'}
	    			<div class="medicationName">${medication.medicationName}</div>
	   				%{
	   					medicationDetailsList = models.MedicationDetail.find("byMedication", medication).fetch();
	   					medicationDetailsList.removeAll(medicationDetails);
	   				}%
	 				#{list items: medicationDetailsList, as:'medicationDetail'}
		    			<div class="treatments">
			    			<div class="medicationDetailName">${medicationDetail.medicationDetailName}</div>
			    			<div>
								<input class="treatment-checkbox" value="${medicationDetail.medicationDetailId}" type="checkbox">
				    			<div id="selectInsertionBlock">
				    				#{if medicationDetail.insertions != null && !medicationDetail.insertions.isEmpty()}
										#{select 'insertions', items:medicationDetail.insertions, valueProperty:'insertionId', labelProperty:'insertionName', value:0, class:'insertion-select'}
											#{option 0} &{'select.insertion'} #{/option}
										#{/select}
				    				#{/if}
								</div>
								<div id="selectTherapyTypeBlock">
									#{if treatmentType.hasTherapyType} 
										#{select 'therapy-type', class:'therapy-type-select'}
											#{option '0'}&{'select.therapy.type'}#{/option}
											#{option 'BASIC'}&{'therapy.type.basic'}#{/option}
											#{option 'SUPPORTING'}&{'therapy.type.supporting'}#{/option}
										#{/select}
									#{/if}				
								</div>
								<div id="selectAllergenBlock">
				    				#{if medicationDetail.allergens != null && !medicationDetail.allergens.isEmpty()}
										#{select 'allergens', items:medicationDetail.allergens, valueProperty:'allergenId', labelProperty:'allergenName', value:0, class:'allergen-select'}
											#{option 0} &{'select.allergen'} #{/option}
										#{/select}
				    				#{/if}
								</div>
								<div style="margin: 6px 0px 4px 390px">
									<label>&{'treatment.description'}</label>
									<textarea class="treatment-description"></textarea>
									<label>&{'treatment.multiplicity'}</label>
									<textarea class="treatment-multiplicity"></textarea>
									<label>&{'treatment.dose'}</label>
									<textarea class="treatment-dose"></textarea>
								</div>
							</div>
		    			</div>
		 	   		#{/list}
		    	#{/list}
	    	</div>
	 	#{/list}
	#{/if}
	<div class="editButtonDiv">
		<input type="submit" class="editButton" onclick="updateTreatments()" id="editButton" value="&{'save'}">
	</div>
</div>